<template>
  <div class="chart-main-card">
    <div class="title">本月报警统计</div>
    <div class="chart-main-content">
      <div class="chart" ref="chart" style="width: 100%;height: 100%;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  methods: {
    initChart() {
      let myChart = echarts.init(this.$refs.chart);
      const labelOption = {
        show: true,
        color: "#fff",
        position: "top",
        fontSize: 14,
        rich: {
          name: {},
        },
      };
      const options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["主机", "发电机", "侧推"],
          textStyle: {
            color: "#fff",
          },
          top: "0",
        },
        grid: {
          left: "0%",
          right: "0%",
          top: "50px",
          bottom: "25px",
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["船舶1", "船舶2"],
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "主机",
            type: "bar",
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [320, 332],
          },
          {
            name: "发电机",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [220, 182],
          },
          {
            name: "侧推",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [52, 24],
          },
        ],
      };
      myChart.setOption(options);
    },
  },
  mounted() {
    const netData = [3, 5];
    this.initChart(netData);
  },
};
</script>

<style></style>
